<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link media="all" href="<c:url value="/css/base.css"/>" type="text/css" rel="stylesheet" />
    <link href="<c:url value="/css/base-dialog.css"/>" type="text/css" rel="stylesheet"/>
    <link href="<c:url value="/css/cart.css"/>" type="text/css" rel="stylesheet"/>
    <link rel="icon" href="<c:url value="/img/favicon.ico"/>"/>
    <title>我的购物车</title>
    <script type="text/javascript" src="<c:url value="/js/jquery-1.11.2.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/js/cart.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/js/cart.extra.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/js/config.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/js/lib-v1.js"/>"></script>
</head>

<body>
	<script type="text/javascript">
		$(document).ready(function(){
			var isEmpty = "${empty items}";
			if(isEmpty == "false"){
				$("#loadingcart").hide();
				$("#emptycart").hide();
				$("#productlist").show();
			}else{
				$("#loadingcart").hide();
				$("#emptycart").show();
				$("#productlist").hide();
			}
			initCart();
		});
		
	</script>
<jsp:include page="/jsp/shortcut.jsp" />

<div class="cart-header w">
    <div class="logo">
    	<a href="<c:url value="/category/home.html"/>">
    		<img height="50" width="174" src="<c:url value="/img/logo.png"/>"/>
    	</a>
   	</div>
    <div class="progress pro-1">
        <ul>
            <li class="step-1">我的购物车</li>
            <li class="step-2">收货信息和付款</li>
            <li class="step-3">提交订单</li>
        </ul>
    </div>
   <!--  <div class="company">
    	<img src="http://static.360buyimg.com/ept/cart/img/company1.png" height="37" width="68"/>
    	<img src="http://static.360buyimg.com/ept/cart/img/company2.png" height="37" width="68"/>
    </div> -->
</div>
<div class="w cart">
    <div id="show"></div>
    <div id="show-cart">
        <div class="cart-frame">
            <div class="tl"></div>
            <div class="tr"></div>
        </div>
        <div class="cart-inner cart-loading" id="loadingcart">
            <div class="loading-style1"><b></b>加载中...</div>
        </div>
        
        <div class="cart-inner cart-empty" id="emptycart" style="display:none;">
       		 <p>你的购物车中暂时么有商品, 
       		 	<a href="<c:url value="/category/home.html"/>">你可以去首页浏览添加商品到购物车中！</a>
       		 </p>
    	</div>
			<!-- product list start -->
			<div class="cart w" id="productlist" style="display: none">
				<div class="cart-inner">
					<div class="cart-thead clearfix">
						<div class="column t-goods">名称</div>
						<!-- <div class="column t-price">Item Price</div> -->
						<div class="column t-price">价格</div>
						<div class="column t-other">数量</div>
						<div class="column t-other">总价</div>
						<div class="column t-other"></div>
					</div>
					<div id="product-list" class="cart-tbody">
						<!-- ************************商品开始********************* -->
						<!-- 主商品 -->
						<c:set var="total" value="0"></c:set>
						<c:forEach var="items" items="${items }" varStatus="status">
							<c:set var="total" value="${total + items.price }"></c:set>
							<div class="item item_selected ">
								<div class="item_form clearfix">
									<div class="cart-item">
										<div class="cell p-goods">
											<span class="pic">
												<a href="" target="_blank">
													<img width="100px" height="100px" src="<c:url value="/image/getImage.action/${items.imageId }"/>" alt="${items.title }"/>
												</a>
											</span>
	
											<div class="name">
												<a href="" target="_blank">${items.title }</a>
											</div>
										</div>
										
										<div class="cell p-price">
											<span>US$ ${items.price }</span>
										</div>
										<div class="cell p-quantity">
											<div class="quantity-form">
												<a href="javascript:void(0);" class="decrement" id="decrement-${items.id }-${items.count }-1"></a>
												<input type="text" class="quantity-text" value="${items.count }" id="changeQuantity-${items.id }-${items.count }-1-0"/>
												<a href="javascript:void(0);" class="increment" id="increment-${items.id }-${items.count }-1-0"></a>
											</div>
										</div>
										<div class="cell p-price1">US$ ${items.price * items.count }</div>
										<div class="cell p-remove">
											<a id="remove-${items.id }-1" class="cart-remove" href="javascript:void(0);">删除</a>
										</div>
										<span class="clr"></span>
										
									</div>
								</div>
							</div>
						</c:forEach>
						
						<!-- ************************商品结束***************** -->
						<!-- ************************************************* -->


					</div>
					<!-- product-list结束 -->
					<div class="cart-toolbar">
						<span class="delete"><b></b>
							<a href="javascript:void(0);" id="remove-batch">清空购物车</a>
						</span>

						<div class="z-price">
							<p>
								总价 (${fn:length(items)} 件) :
								<strong id="finalPrice">￥ ${total }元</strong>
							</p>
							<!--
                   <p>Total Save: <span> US$ -18.98</span></p>
                    -->
						</div>
					</div>
					<div class="cart-button">
						<a href="<c:url value="/order/convertOrder.action"/>" class="checkout"></a>
						<a href="<c:url value="/category/home.html"/>" class="continue"></a>
					</div>

				</div>
			</div>

			<!-- product list end -->

			<div class="cart-frame">
            <div class="bl"></div>
            <div class="br"></div>
        </div>
    </div>
    <!-- <div class="cart-removed" style="display:none;">
        <div class="r-title">These items were removed from your cart. You can add them again or add to your wish list:
        </div>

    </div> -->
</div>

<jsp:include page="/jsp/bottom.jsp" />
<!-- footer end -->

<!-- 各种弹出层开始 -->


<!-- 修改、删除等操作弹层 -->
<div id="cart-delete-dialog" class="dialog" style="display:none;">
    <div class="dialog-outer">
        <span class="dialog-bg dialog-bg-n"></span>
        <span class="dialog-bg dialog-bg-ne"></span>

        <span class="dialog-bg dialog-bg-e"></span>
        <span class="dialog-bg dialog-bg-se"></span>
        <span class="dialog-bg dialog-bg-s"></span>
        <span class="dialog-bg dialog-bg-sw"></span>
        <span class="dialog-bg dialog-bg-w"></span>
        <span class="dialog-bg dialog-bg-nw"></span>

        <div class="dialog-inner">
            <div class="dialog-toolbar clearfix">
                <a class="dialog-close" href="javascript:void(0);" title="关闭">关闭</a>

                <h3 class="dialog-title">删除商品</h3>
            </div>
            <div class="dialog-content">
                <div class="cart-delete">你确定要将商品删除吗？</div>
                <div class="btns clearfix">
                    <a href="javascript:void(0);" class="btn btn-ok" id="btnRemoveConfirm">
                    	<span class="btn-text">确定</span>
                    </a>
                    <a href="javascript:void(0);" class="btn btn-cancel" id="btnRemoveCancel">
                    	<span class="btn-text">取消</span>
                    </a>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- <div id="cart-loading-dialog" class="dialog cart-tooltip" style="display:none; left:20px;">
    <div class="dialog-outer">
        <span class="dialog-bg dialog-bg-n"></span>
        <span class="dialog-bg dialog-bg-ne"></span>

        <span class="dialog-bg dialog-bg-e"></span>
        <span class="dialog-bg dialog-bg-se"></span>
        <span class="dialog-bg dialog-bg-s"></span>
        <span class="dialog-bg dialog-bg-sw"></span>
        <span class="dialog-bg dialog-bg-w"></span>
        <span class="dialog-bg dialog-bg-nw"></span>

        <div class="dialog-inner">
            <div class="loading-style1"><b></b>Loading, please wait...</div>

        </div>
        <div class="dialog-bump"><span class="dialog-arrow"></span></div>
    </div>
</div> -->

<!-- <div id="cart-success-dialog" class="dialog cart-tooltip" style="display:none; left:250px;">
    <div class="dialog-outer">
        <span class="dialog-bg dialog-bg-n"></span>
        <span class="dialog-bg dialog-bg-ne"></span>
        <span class="dialog-bg dialog-bg-e"></span>

        <span class="dialog-bg dialog-bg-se"></span>
        <span class="dialog-bg dialog-bg-s"></span>
        <span class="dialog-bg dialog-bg-sw"></span>
        <span class="dialog-bg dialog-bg-w"></span>
        <span class="dialog-bg dialog-bg-nw"></span>

        <div class="dialog-inner">
            <div class="dialog-content">
                <div class="dialog-message">
                    The item quantity has been succesfully updated!
                    <br/>
                    <span id="adMessage"></span>
                    Total Amount:
                    <span id="finalPriceChanged">US&#36; </span>
                    <br/>
                    <a href="javascript:void(0);" id="closeSuccessDialog">Close</a>
                </div>
            </div>
        </div>
        <div class="dialog-bump"><span class="dialog-arrow"></span></div>
    </div>

</div> -->

<!-- <div id="cart-restrict-warning-dialog" class="dialog cart-tooltip cart-tooltip-notice"
     style="display:none; left:480px;">
    <div class="dialog-outer">
        <span class="dialog-bg dialog-bg-n"></span>
        <span class="dialog-bg dialog-bg-ne"></span>
        <span class="dialog-bg dialog-bg-e"></span>
        <span class="dialog-bg dialog-bg-se"></span>
        <span class="dialog-bg dialog-bg-s"></span>
        <span class="dialog-bg dialog-bg-sw"></span>

        <span class="dialog-bg dialog-bg-w"></span>
        <span class="dialog-bg dialog-bg-nw"></span>

        <div class="dialog-inner">
            <div class="dialog-content">
                <div class="dialog-notice">Discounts on this item is limited to a quantity of <span
                        id="limitNum"></span>.
                </div>
            </div>
        </div>
        <div class="dialog-bump"><span class="dialog-arrow"></span></div>

    </div>
</div> -->

<!-- <div id="cart-format-warning-dialog" class="dialog cart-tooltip cart-tooltip-notice" style="display:none; left:710px;">
    <div class="dialog-outer">
        <span class="dialog-bg dialog-bg-n"></span>
        <span class="dialog-bg dialog-bg-ne"></span>
        <span class="dialog-bg dialog-bg-e"></span>
        <span class="dialog-bg dialog-bg-se"></span>
        <span class="dialog-bg dialog-bg-s"></span>

        <span class="dialog-bg dialog-bg-sw"></span>
        <span class="dialog-bg dialog-bg-w"></span>
        <span class="dialog-bg dialog-bg-nw"></span>

        <div class="dialog-inner">
            <div class="dialog-content">
                <div class="dialog-notice" id="dialog-warning-notice">You can only enter numbers in this field!</div>
            </div>
        </div>

        <div class="dialog-bump"><span class="dialog-arrow"></span></div>
    </div>
</div> -->


</body>
</html>
